<template>
	<view class="body" @touchstart="start" @touchend="end"> 
		<!-- 搜索 -->
		<view class="search"> 
			<u-search placeholder="请输入搜索内容" v-model="keyword" :showAction="false" @search="search"></u-search>
		</view>
		 <!-- 导航条 -->
		 <view class="nav">
			 <u-tabs :list="classify" @click="fl()"></u-tabs>
		 </view>
		 <!-- 订单内容 -->
		 <view id="order">
		 	<view class="order-card" v-for="(item,index) in orderList" :key="index" @click="ordeclick(index)">
		 		<view class="order-top">
		 			<text class="ordertitle">{{item.title}}</text>
		 			<text class="ordertype">{{ordertypeidtext}}</text>
		 			<text class="orderprice">{{item.price}}元</text>
		 			<view class="line">
		 				<u-line color="#7d7e80"></u-line>
		 			</view>
		 		</view>
		 		<view class="order-body">
		 			<view class="userimg">
		 				<u-avatar :src="item.issueUserImg" size="100rpx"></u-avatar>
		 			</view>
		 			<text class="ordername">{{item.issueUserName}}</text>
		 			<text class="ordercontent">{{item.content}}</text>
		 			<text class="date">发布时间:     {{item.createTime}}</text>
		 			<text class="orderbutton" @click.stop="orderbutton(index)" >立即接单</text>
		 		</view>
		 	</view>
		 </view>
		 <!-- 订单底部加载 -->
		 <view class="loading" >
		 	<u-loadmore :status="status" :line="line" :nomoreText="nomoreText" /> 
		 </view>
		 <!-- 右侧发布标签 -->
		 <view class="tb" v-show="tb"></view>
			<view class="bottom" :class="flag ? 'left':'right'">
				<text class="t-icon t-icon-dingdan3" style="width: 96rpx;height: 96rpx;" @click="addorder" ></text>
			</view>
	</view>
</template>
<script>
	import {http} from "../static/service/requestAddress/rtas.js"
	export default {
		data() {
			return {
				keyword:"",//搜素文本框
				classify:[ 
						{
							name: '帮我买',
							url:http+"buyorder/",
							page:0,
						}, 
						{
						    name: '帮我送',
							url:http+"sendorder/",
							page:0,
						},
						{
						    name: '帮我做',
							url:http+"workorder/",
							page:0,
						}, 
						{
							name:"需求订单",
							url:http+"need/",
							page:0,
						},
					],
				clientX:'',
				flag:false,
				tb:true,
				status:"loading",
				line:true,
				ordertypeidtext:"",//订单类型文本
				oldList:[],//接收的请求数据
				orderList:[],//渲染页面的数据
				nomoreText:"没有更多了",
				num:0,//切换内容对应的下标 
			} 
		},
		created() {
			//获取数据
			uni.request({
				url:this.classify[0].url+this.classify[this.num].page, 
				method:"GET",
				complete:(res) =>{  
					if(res.data.code == 20021){
						this.oldList = res.data.date //将获取的数据存入旧数据的集合
						const datalist = res.data.date
						//对数据处理
						for(var i = 0; i < datalist.length;i++){
							datalist[i].createTime = (datalist[i].createTime).substring(0,datalist[i].createTime.lastIndexOf(":"))
						}
						this.orderList = datalist
						this.ordertypeidtext = this.classify[this.num].name
						this.status = "nomore"
						//增加分页值
						this.classify[this.num].page = this.classify[this.num].page+1
					}else{
						uni.$u.toast("获取数据失败!")
					}
				}
			})
		},
		// 上拉加载
		onReachBottom() {
			this.status = "loading"
			//获取数据
			uni.request({
				url:this.classify[this.num].url+this.classify[this.num].page,
				method:"GET",
				complete:(res) =>{
					if(res.data.code == 20021){
						this.oldList += res.data.date //将获取的数据存入旧数据的集合
						const datalist = res.data.date
						//对数据处理
						for(var i = 0; i < datalist.length;i++){
							datalist[i].createTime = (datalist[i].createTime).substring(0,datalist[i].createTime.lastIndexOf(":"))
						}
						this.orderList = this.orderList.concat(datalist)
						this.ordertypeidtext =  this.classify[this.num].name
						this.status = "nomore"
						//增加分页值
						this.classify[this.num].page = this.classify[this.num].page+1
					}else{
						this.status = "nomore"
					}
				}
			})
			// this.orderList = this.orderList.concat(list)//加载数据
		},
		methods: { 
			//搜索功能
			 search(){ 
				 if(this.keyword == "" | this.keyword.length == 0){
				 	uni.$u.toast("搜索数据不为空")
					return
				 }
				this.orderList = []
				this.oldList = []
				this.status = "loading"
				 uni.request({
				 	url: this.classify[this.num].url +"search/"+this.keyword,
					method:"GET",
					complete:(res) =>{
						if(res.data.code == 20021){
							this.oldList = res.data.date //将获取的数据存入旧数据的集合
							const datalist = res.data.date
							//对数据处理
							for(var i = 0; i < datalist.length;i++){
								datalist[i].createTime = (datalist[i].createTime).substring(0,datalist[i].createTime.lastIndexOf(":"))
							}
							this.orderList = this.orderList.concat(datalist)
							this.ordertypeidtext =  this.classify[this.num].name
							this.status = "nomore"
						}else{
							console.log("获取失败")
						}
					}
				 })
			 },
			 // 切换分类
			 fl(itme){
				 this.num  = itme.index
				 this.classify[this.num].page = 0//重置页数
				 this.orderList = []
				 this.oldList = []
				 this.status = "loading"
				 //获取数据
				 uni.request({
				 	url:this.classify[this.num].url+this.classify[this.num].page,
				 	method:"GET",
				 	complete:(res) =>{
				 		if(res.data.code == 20021){
				 			this.oldList = res.data.date //将获取的数据存入旧数据的集合
				 			const datalist = res.data.date
				 			//对数据处理
				 			for(var i = 0; i < datalist.length;i++){
				 				datalist[i].createTime = (datalist[i].createTime).substring(0,datalist[i].createTime.lastIndexOf(":"))
				 			}
				 			this.orderList = this.orderList.concat(datalist)
				 			this.ordertypeidtext =  this.classify[this.num].name
				 			//增加分页值
				 			this.classify[this.num].page = this.classify[this.num].page+1
							this.status = "nomore"
				 		}else{
				 			this.status = "nomore"
				 		}
				 	}
				 })
			 },
			 //订单点击事件
			 ordeclick(index){
			 	uni.navigateTo({
			 		url:"/pages/massage/orderDetails?data="+JSON.stringify(this.orderList[index])
			 	})
			 },
			 //立即接单按钮
			 orderbutton(index){
				 uni.navigateTo({
				 	url:"/pages/massage/orderDetails?data="+JSON.stringify(this.orderList[index])
				 })
			 },
			 //发布订单
			 addorder(){
				 uni.navigateTo({
				 	url:"/pages/massage/issue"
				 })
			 },
			 start(e){               
			     this.clientX=e.changedTouches[0].clientX;   
			 },
			 end(e){
				const T = e.changedTouches[0].clientX-this.clientX
				if(T < 0){ 
					this.tb = false
					this.flag = true
				}
				if(T > 0 ){
					this.flag = false
					setTimeout(()=>{
						this.tb = true
					},100)
				}
			 }
		},
	}
</script>
<style>
	@import url("@/static/css/componentsCss/loafer/loaferindex.css");
	.left{
		position: fixed;
		right: 8rpx;
		bottom: 16%; 
		transition: all 0.5s; 
	}
	.right{
		position: fixed;
		right: -96rpx;
		bottom: 16%;
		transition: all 0.5s; 
		opacity: 0;
	}
</style>